<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部搜索关键字表单 -->
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
          <el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              size="small"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button size="small" @click="cleanFn">清除</el-button>
            <el-button type="primary" size="small" @click="searchFn(true)"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 表格数据提示 -->
        <el-alert
          :title="`数据一共 ${total} 条 `"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
        <!-- 表格主体 -->
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 15px"
          :header-cell-style="headerFn"
        >
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column label="题型" width="90" align="center">
            <template v-slot="{ row }">
              {{ questionTypeFn(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="题目编号" width="200">
            <template v-slot="{ row }">
              <div v-for="item in row.questionIDs" :key="item.number">
                <a
                  href="javascript:;"
                  style="color: #0099ff"
                  @click="previewFn(item.id)"
                  >{{ item.number }}</a
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="170">
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            width="170"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)"
            width="170"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="170">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                @click="delFn(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页公能 -->
        <el-pagination
          @size-change="pagesizeFn"
          @current-change="pageFn"
          :page-sizes="[ 20, 50, 100]"
          :page-size="form.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          background
          style="margin: 25px 0; float: right"
        >
        </el-pagination>
      </el-card>
      <!-- 预览弹窗 -->
      <questions-preview
        :show-dialog="showPreview"
        :object="previewObject"
        @closeDialog="showPreview = false"
      ></questions-preview>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'QuestionsRandoms',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      form: {
        keyword: '' // 搜索关键字
      }, // 头部搜索关键字
      tableData: [], // 表格初始化数据
      params: {
        page: 1, // 页数
        pagesize: 20 // 当前页面显示数
      },
      total: 0, // 总页数
      showPreview: false, // 题库的显示与隐藏
      previewObject: {}, // 预览传下去的对象
      clickType: false // 点击状态
    }
  },
  mounted () {
    this.getRandoms()
  },
  methods: {
    // 表格头部样式
    headerFn () {
      return 'background-color: rgb(250, 250, 250); border-bottom: 2px solid #e9e9e9'
    },
    // 获取数据
    async getRandoms () {
      const res = await randoms(this.params)
      const { counts, items } = res.data
      this.tableData = items
      this.total = counts
    },
    // 题型函数
    questionTypeFn (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },
    // 搜索关键字功能
    async searchFn (type) {
      if (type) {
        this.clickType = type
      }
      if (this.form.keyword === '') {
        this.clickType = false
      }
      if (this.clickType) {
        const res = await randoms({ ...this.params, ...this.form })
        const { counts, items } = res.data
        this.tableData = items
        this.total = counts
      } else {
        this.getRandoms()
      }
    },
    // 清除按钮
    cleanFn () {
      this.form.keyword = ''
      this.getRandoms()
    },
    // 分页函数
    pageFn (page) {
      this.params.page = page
      this.searchFn()
    },
    pagesizeFn (size) {
      this.params.pagesize = size
      this.searchFn()
    },
    // 删除功能
    delFn (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.$message.success('删除成功')
        this.getRandoms()
      }).catch(() => {

      })
    },
    // 预览功能
    async previewFn (id) {
      this.showPreview = true
      const res = await detail({ id })
      this.previewObject = res.data
    }

  }
}

</script>

<style>
.el-pagination__jump {
  margin: 0;
}
</style>
